<!DOCTYPE html>
<html>
<head>
    <meta charset="uft-8">
    <title>Menu</title>
    <link rel="stylesheet" type="text/css" href="./mypage.css"/>
</head>

<body>
    <!--页头-->
    <div class="header">
        <!--分为左侧logo及右侧导航栏两部分-->
        <div class="logo">
            <img  src="./image/Logo.png" alt=img height="20"/>
            <h4> Gratia </h4>
        </div>  
            
        <div class="navigation">
            <a href="#about" target="_blank">About</a>
            <a href="#menu" target="_blank">Menu</a>
            <a href="#gallery" target="_blank">Gallery</a>
            <a href="#contact" target="_blank">Contact</a>
        </div>    
    </div>

    <hr>    <!--中间分割线-->

    <!--中间标题-->
    <div class="title">
        <h1>MENU</h1>
        <p class="my-font">Lorem ipsum dolor sit amet,consectetur adipiscing elit</p>   
    </div>

    <!--图画廊-->
    <div class="gallery">

        <!-- main dishs -->
        <div class="image">
            <a href="./image/Main Dishes.png">
                <img src="./image/Main Dishes.png" alt="image"/>
            </a>
            <h1>Main Dishes</h1>
            <p>Lorem ipsum dolor sit amet,consectetur adipiscing elit</p>
        </div>
                
        <!-- soups -->
        <div class="image">
            <a href="./image/Soups.png">
                <img src="./image/Soups.png" alt="image"/>
            </a>
            <h1>Soups</h1>
            <p>Lorem ipsum dolor sit amet,consectetur adipiscing elit</p>
        </div>
        <!-- hamburger -->
        <div class="image">
            <a href="./image/Hamburgers.png">
                    <img src="./image/Hamburgers.png" alt="image"/>
            </a>
            <h1>Hamburgers</h1>
            <p>Lorem ipsum dolor sit amet,consectetur adipiscing elit</p>
        </div>
        <!-- desserts -->
        <div class="image">
            <a href="./image/Desserts.png">
                <img src="./image/Desserts.png" alt="image"/>
            </a>
            <h1>Desserts</h1>
            <p>Lorem ipsum dolor sit amet,consectetur adipiscing elit</p>
        </div>
        <!-- Barbecue -->
        <div class="image">
            <a href="./image/Barbecue.png">
                <img src="./image/Barbecue.png" alt="image"/>
            </a>
            <h1>Barbecue</h1>
            <p>Lorem ipsum dolor sit amet,consectetur adipiscing elit</p>
        </div>
        <!-- Salads -->
        <div class="image">
            <a href="./image/Salads.png">
                <img src="./image/Salads.png" alt="image"/>
            </a>
            <h1>Salads</h1>
            <p>Lorem ipsum dolor sit amet,consectetur adipiscing elit</p>
        </div>
    </div>

    <!--页脚logo-->
    <div class="footer-logo">
        <img src="./image/Logo.png" />
    </div>

    <!--页脚-->
    <div class="footer"> 
        <h4>Gratia Restaurant</h4>
        <p>Copyright 2016.All rights reserved by symu</p>
        <!--其他logo为一个块且只显示上边框-->
        <div class="other-logo">
            <a href="#facebook">
                <img src="./image/FB.png" alt="image">
            </a>
            <a href="#twitter">
                <img src="./image/TR.png" alt="image">
            </a>
            <a href="#IG">
                <img src="./image/IG.png" alt="image">
            </a>
        </div>
    </div>    
</body>
</html>
 